layui.config({
    base: '../../static/layuiadmin/' //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
}).use(['jquery','layer'], function() {
    var $ = layui.jquery;
    var layer = layui.layer; //独立版的layer无需执行这一句

    $("#recBtn").click(function () {
        $("#regcoDiv").empty();
        let vedioComp = "<video id='video2' width='500px' height='500px' autoplay='autoplay' style='margin-top: 20px'></video><canvas id='canvas2' width='500px' height='500px' style='display: none'></canvas>";
        $("#regcoDiv").append(vedioComp);
        let constraints = {
            video: {width: 500, height: 500},
            audio: true
        };
        //获得video摄像头区域
        let video = document.getElementById("video2");
        //这里介绍新的方法，返回一个 Promise对象
        // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
        // then()是Promise对象里的方法
        // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
        // 避免数据没有获取到
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (MediaStream) {
            video.srcObject = MediaStream;
            video.play();
        });
        // var t1 = window.setTimeout(function() {
        //     chooseFileChangeComp()
        // },2000)
        $("#recBtn").css("display","none")
        $("#submitBtn").css("display","")
    })

    //提交人脸识别数据
    $("#submitBtn").click(function () {
        let regcoDivComp = $("#regcoDiv");
        if(regcoDivComp.has('video').length){
            let video = document.getElementById("video2");
            let canvas = document.getElementById("canvas2");
            let ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 500, 500);
            var base64File = canvas.toDataURL();
            var formData = new FormData();
            formData.append("file", base64File);
            $.ajax({
                type: "post",
                url: "/faceSearch",
                data: formData,
                contentType: false,
                processData: false,
                async: false,
                success: function (text) {
                    var res = JSON.stringify(text)
                    if (text.code == 0) {
                        var name = text.data.name;
                        $("#nameDiv").html("姓名：" + name);
                        var similar = text.data.similarValue;
                        $("#similarDiv").html("相似度：" + similar + "%");
                        var age = text.data.age;
                        $("#ageDiv").html("年龄：" + age);
                        var gender = text.data.gender;
                        $("#genderDiv").html("性别：" + gender);
                        // img.css("background-image", 'url(' + text.data.image + ')');
                        var str = `
                                <div>
                                    <p>姓名：${name}</p>
                                    <p>相似度：${similar}%</p>
                                    <p>年龄：${age}</p>
                                    <p>性别：${gender}</p>
                                </div>
                        `
                        layer.open({
                            title:"人脸识别结果"   //弹出层的顶部的标题
                            ,type:0                   //弹出层的基本类型，默认为0，信息框
                            ,async:false
                            ,content:str,		//访问id的content的div
                        })
                    } else {
                        $("#nameDiv").html("");
                        $("#similarDiv").html("");
                        $("#ageDiv").html("");
                        $("#genderDiv").html("");
                        layer.open({
                            title:"人脸识别结果"   //弹出层的顶部的标题
                            ,type:0                   //弹出层的基本类型，默认为0，信息框
                            ,async:false
                            ,content:"人脸不匹配",		//访问id的content的div
                        })
                    }

                },
                error: function (error) {
                    $("#nameDiv").html("");
                    $("#similarDiv").html("");
                    $("#ageDiv").html("");
                    $("#genderDiv").html("");
                    layer.open({
                        title:"错误提示"   //弹出层的顶部的标题
                        ,type:0                   //弹出层的基本类型，默认为0，信息框
                        ,async:false
                        ,content:JSON.stringify(error),		//访问id的content的div
                    })
                }
            });
        }
    })


})